<template>
  <a-card title="投诉与建议">
    <template slot="extra">
      <a-button type="danger" @click="addComplaint">添加投诉与建议</a-button>
    </template>
    <a-spin :spinning="loading">
      <a-empty v-if="complaintList.length === 0">
        <span slot="description"> 暂无发布投诉与建议~~ </span>
        <a-button type="danger" @click="addComplaint">立刻发布</a-button>
      </a-empty>
      <a-table
        v-else
        size="middle"
        :row-key="(record) => record.id"
        :columns="complaintColumns"
        :data-source="complaintList"
      >
        <template slot="type" slot-scope="text">
          {{typeOpts[text]}}
        </template>
        <template slot="file" slot-scope="text">
          <img width="50" height="50" :src="text" />
        </template>
      </a-table>
    </a-spin>
  </a-card>
</template>

<script>
import { getComplaintList } from '@/api/complaint'

export default {
  name: 'ComplaintList',
  data () {
    const complaintColumns = [
      {
        title: '投诉类型',
        dataIndex: 'type',
        scopedSlots: { customRender: 'type' }
      },
      {
        title: '描述',
        dataIndex: 'describe'
      },
      {
        title: '凭证',
        dataIndex: 'file',
        scopedSlots: { customRender: 'file' }
      }
    ]
    return {
      complaintColumns,
      complaintList: [],
      typeOpts: {},
      loading: false
    }
  },
  created () {
    this.getComplaintList()
  },
  methods: {
    getComplaintList () {
      this.loading = true
      getComplaintList().then(res => {
        this.complaintList = res.result.data
        this.typeOpts = res.result.typeOpts
        this.loading = false
      })
    },
    addComplaint () {
      this.$router.push({ name: 'AddComplaint' })
    }
  }
}
</script>

<style scoped>

</style>
